<template>
	<div class="login-view">
		<div class="text-center mt-4">
			<img alt="Vue logo" src="../assets/logo.png" width="200">
		</div>
		<div class="container">
			<form>
			    <legend>直课堂面试题库</legend>
			    <div class="form-group row mt-4">
					<label class="form-label">Username</label>
					<input type="text" class="form-control" v-model="username" placeholder="请输入用户名">
					<small id="emailHelp" class="form-text text-muted">
						账号由管理员admin创建
					</small>
			    </div>
			    <div class="form-group row mt-4">
			      <label class="form-label">Password</label>
			      <input type="password" v-model="password" class="form-control" placeholder="请输入密码">
			    </div>
				<div class="form-group row">
					<span class="btn btn-primary mt-5" @click="login">登录</span>
				</div>
			</form>
		</div>
	</div>
</template>

<script>
	import { api_login } from '@/api/login'
	export default {
		name: 'HomeView',
		data() {
			return {
				username: '',
				password: ''
			}
		},
		methods: {
			login() {
				api_login({
					username: this.username,
					password: this.password
				}).then(res=>{
					this.$message.success(res.data.msg)
					//保存token到localStorage
					localStorage.setItem('x-token', res.data.token)
					//保存登录用户信息
					localStorage.setItem('loginUser', JSON.stringify(res.data.loginUser))
					//强制刷新页面到admin
					window.location.href = 'http://' + window.location.host + process.env.BASE_URL + 'admin' 
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.login-view {
		.container {
			width: 500px;
		}
	}
</style>
